<template>
    <div class="home-container">
      <el-row class="stat-card-row">
        <el-col :span="6" v-for="(card, index) in statCards" :key="index">
          <div class="stat-card">
            <i :class="['iconfont', card.iconClass]" :style="{ fontSize: '32px' }"></i>
            <span class="card-title">{{ card.title }}</span>
            <span class="card-number">{{ card.number }}</span>
          </div>
        </el-col>
      </el-row>
      <div class="chart-container">
        <h2>数据统计</h2>
        <div id="mainChart" style="width: 100%; height: 400px;"></div>
      </div>
    </div>
  </template>
  
  <script setup>
  import { ref, reactive, onMounted } from 'vue'
  import * as echarts from 'echarts'
  import { getHomeEchartsData } from '@/api/echarts'
  import { getOrderTotalData } from '@/api/echarts'
  const echartsData = reactive({})
  const statCards = ref([
    { iconClass: 'icon-tuanduicankaoxian-', title: '总订单', number: '102,400' },
    { iconClass: 'icon-xiaoshoue1', title: '总销售额', number: '102,400' },
    { iconClass: 'icon-dingdan', title: '今日订单数', number: '102,400' },
    { iconClass: 'icon-xiaoshoue', title: '今日销售额', number: '102,400' }
  ])

  onMounted(() => {
    const myChart = echarts.init(document.getElementById('mainChart'));
    getHomeEchartsData().then(res => {

      echartsData.amountData = res.amountData;
      echartsData.orderData = res.orderData;
      statCards.value[2].number = res.todayOrder+'';
      statCards.value[0].number = res.totayAmount+'';
      statCards.value[3].number = res.totalOrder+'';
      statCards.value[1].number = res.totalAmount+'';
      echartsData.xData = res.xData;
      const option = {
        legend: {
          data: ['订单', '销售额', '注册人数', '管理人员数']
        },
        // 修正 xAxis 配置，明确类型和数据
        xAxis: {
          type: 'category', // 假设是分类轴，根据实际数据调整类型（如 'value' 等）
          data: echartsData.xData
        },
        yAxis: {},
        series: [
          {
            name: '订单',
            type: 'line',
            data: echartsData.orderData
          },
          {
            name: '销售额',
            type: 'line',
            data: echartsData.amountData
          },
          {
            name: '注册人数',
            type: 'line',
            data: [50, 80, 100, 100, 80, 50, 50, 50, 150]
          },
          {
            name: '管理人员数',
            type: 'line',
            data: [0, 0, 0, 0, 0, 0, 0, 0, 0]
          }
        ]
      };
      myChart.setOption(option);
    });
    
  });
  </script>
  
  <style lang="scss" scoped>
  .stat-card-row {
    margin-bottom: 20px;
  }
  .stat-card {
    background: #f5f7fa;
    padding: 20px;
    border-radius: 4px;
    text-align: center;
  }
  .card-icon {
    color: #606266;
    margin-bottom: 10px;
  }
  .card-title {
    display: block;
    color: #606266;
    font-size: 14px;
    margin-bottom: 5px;
  }
  .card-number {
    font-size: 20px;
    color: #303133;
  }
  .chart-container {
    background: white;
    padding: 20px;
    border-radius: 4px;
  }
  .home-container{
    width: 100%;
    height: 100vh;
    background: #f5f7fa
  }
  :deep(.el-breadcrumb){
    height: 40px;
    line-height: 40px;
    padding-left: 10px
  }
  </style>